<template>

  <el-card>

    <!--头部-->
    <div style="min-height: 220px; margin-bottom: 5px">
      <el-row>
        <el-col :span="24">

          <div class="box-content" >

            <!-- 图片 + 文字的 flex 容器 -->
            <div class="" style="display: flex; gap: 10px; align-items: flex-start;">
              <!--图片-->
              <div>
                <el-image class="component-ico" fit="contain" :src="component.icoUrl || require('@/assets/images/ico/app.png')" />
              </div>

              <!--图片左边的文字-->
              <div >

                <div style="display: flex; gap: 10px; align-items: center; min-width: 500px">
                  <h2>{{ component.name }}</h2>
                  <el-tag type="danger" size="mini" v-if="component.mainVersion">主版本 v.{{component.mainVersion}} </el-tag>
                </div>

                <el-row>
                  <el-col :span="3">运行环境：</el-col>
                  <el-col :span="21">
                    <span>{{ component.osStr }}</span>
                  </el-col>
                </el-row>

                <el-row style="margin-top: 5px">
                  <el-col :span="3">官网地址：</el-col>
                  <el-col :span="21">
                    <el-link class="" type="primary" target="_blank" :href="component.officialWebUrl">
                      {{ component.officialWebUrl }}
                    </el-link>
                  </el-col>
                </el-row>

              </div>

              <!--操作按钮-->
              <!--<div style="margin-left: auto; display: flex; gap: 10px;">-->
              <!--  <el-button @click="openUpdBefore(site)" type="warning" :size="layoutCss.size">编辑</el-button>-->
              <!--  <el-button @click="delTips(site)" type="danger" :size="layoutCss.size">删除</el-button>-->
              <!--</div>-->

            </div>

            <p style="margin-top: 10px; margin-bottom: 10px;">详情：</p>
            <p class="description">{{ component.briefIntroduction }}</p>
          </div>

        </el-col>
      </el-row>

      <!--分割线-->
      <el-divider></el-divider>
    </div>








    <!--中间部分-->
    <el-row :gutter="10">


      <!--中间左边-->
      <el-col :span="14">
        <ComponentVersionList ref="ComponentVersionListRef"/>
      </el-col>



      <!--中间右边，文件树-->
      <el-col :span="10">
        <OpsCommonUseList ref="OpsCommonUseListRef" bind-type="component" :bind-id="this.$route.query.componentId"/>
      </el-col>

    </el-row>




  </el-card>


</template>

<script>


import http from '@/utils/http'
import ComponentVersionList from './ComponentVersionList.vue'
import OpsCommonUseList from '../common/OpsCommonUseList'

export default {
  components: {
    ComponentVersionList,
    OpsCommonUseList,
  },
  data() {
    return {
      // 当前的组件
      component: {},
      layoutCss :{
        size: 'mini',
      },
    };
  },
  methods: {
    /**
     * 渲染图片
     * 只能这样做，图片这里不支持非固定地址返回
     * @param item
     */
    getImageUrlInfo(item) {
      if (!item || !item.ico || item.ico === 'null') {
        // 判空或无效，直接显示默认图
        this.$set(item, 'icoUrl', null);
        return;
      }

      http.getImageUrl(item.ico)
        .then(url => {
          // 异步赋值，触发响应式更新
          this.$set(item, 'icoUrl', url);
        })
        .catch(() => {
          // 下载失败 fallback 默认图
          this.$set(item, 'icoUrl', null);
        });
    },
    /**
     * 查询出组件信息
     */
    getOpsComponentById() {
      let query = {
        current: 1,
        size: 1,
        id: this.$route.query.componentId,
      }

      http.post("/opsComponent/getOpsComponentPageList", query).then(response => {
        let res = response.data;
        // 分页数据
        let data = res.data;
        // 表格数据
        if (data.records){
          this.component = data.records[0]
          this.getImageUrlInfo(this.component)
        }

      }).catch(error => {
        this.$message.error(error.message);
      })
    },
  },
  mounted() {
    this.getOpsComponentById()

    this.$store.commit('navigationListChange', [
      {name: '组件列表', url: '/toComponentList', query: {}},
      {name: '组件详情', url: '/toComponentLayout', query: {componentId: this.$route.query.componentId}},
    ])
  },
  watch: {

  },
}
</script>




<style>



</style>





<style scoped>


.component-ico {
  width: 126px;
  height: 110px;
}

.box-content .description {
  margin-top: 0px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 显示3行 */
  -webkit-box-orient: vertical;
  cursor: pointer;
}



</style>
